<script>
import { ref, reactive, provide, inject } from 'vue'
import {ElMessage} from "element-plus";
import request from "@/utils/request";
import { useRouter } from 'vue-router';

export default {
  name: "Register",
  setup() {

    const form = reactive({
      custAccount: '',
      custPwd: '',
      checkPass: '',
    })
    const dialogVisible = ref(false)
    const loginForm = ref(null)
    const router = useRouter();



    const validatePass = (rules, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== form.custPwd) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }

    const rules = reactive({
      checkPass: [{required: true,validator: validatePass, trigger: 'blur'}],
      custAccount: [{required: true, message: '账号不可为空', trigger: 'blur'}],
      custPwd: [{required: true, message: '密码不可为空', trigger: 'blur'}]
    })

    const handleClose = () => {
      console.log("Handle Close，空函数")
    }

    const onSubmit = () => {
      //为表单绑定验证功能
      loginForm.value.validate((valid) => {
        if (valid) {
          request.post('/user/register', {
            custAccount: form.custAccount,
            custPwd: form.custPwd
          })
              .then(response => {
                if(response.data.code === 20000){

                  // 使用vue-router 路由到指定页面，该方式称之为编程式导航
                  router.push("/login")
                  ElMessage.success("注册成功")
                } else {
                  console.log(response.data)
                  ElMessage.error(form.custAccount + "已被注册")
                }
              })
        } else {
          dialogVisible.value = true
          return false
        }
      })
    }

    return {
      form,
      rules,
      dialogVisible,
      loginForm,
      router,
      handleClose,
      onSubmit
    }
  },
  created() {
    console.log(this)
  }
}
</script>

<template>
  <div>
    <el-form ref="loginForm" :model="form" :rules="rules" label-width="80px" class="login-box">
      <h3 class="login-title">注册</h3>
      <el-form-item label="账号" prop="custAccount">
        <el-input type="text" placeholder="请输入账号" v-model="form.custAccount" />
      </el-form-item>
      <el-form-item label="密码" prop="custPwd">
        <el-input type="text" placeholder="请输入密码" v-model="form.custPwd" />
      </el-form-item>
      <el-form-item label="确认密码" prop="checkPass">
        <el-input type="text" placeholder="请确认密码" v-model="form.checkPass" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" v-on:click="onSubmit('loginForm')">注册</el-button>
      </el-form-item>
    </el-form>
    <el-dialog
        title="温馨提示"
        v-model:visible="dialogVisible"
        width="30%"
        :before-close="handleClose">
      <span>请输入账号和密码</span>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </span>
    </el-dialog>
  </div>

</template>

<style scoped>
.login-box{
  border: 1px solid #DCDFE6;
  width: 350px;
  margin: 50px auto;
  padding: 35px 35px 15px 35px;
  border-radius:5px ;
  box-shadow: 0 0 25px #909399;
}

.login-title{
  text-align:center;
  margin: 0 auto 40px auto;
  color: #303133;
}

</style>
